<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input style="width: 260px; margin-right: 5px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
      <el-button type="primary">查 询</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="danger">批量删除</el-button>
      <el-button type="primary">新增</el-button>
      <el-button type="success">批量导入</el-button>
      <el-button type="info">批量导出</el-button>
    </div>

  <div class="card" style="margin-bottom: 5px">
    <el-table :data="data.tableData" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff'}">
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="180">
        </el-table-column>
    </el-table>
  </div>
    <div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          :page-size="data.pageSize"
          layout="total, prev, pager, next, "
          :total="data.total">
      </el-pagination>
    </div>

  </div>
</template>

<script setup>
import { reactive } from "vue";
import {Search} from "@element-plus/icons-vue";

const data = reactive({
  name: null,
  pageNum: 1,
  pageSize: 5,
  total: 6,
  tableData: [
    { name:'李四', phone: '123456799', address: '贵州贵阳46'},
    { name:'李四2', phone: '123456799', address: '贵州贵546阳'},
    { name:'李四1', phone: '123456799', address: '贵州546贵阳'},
    { name:'李四3', phone: '123456799', address: '贵州贵654阳'},
    { name:'李四4', phone: '123456799', address: '贵州654贵阳'},
    { name:'李四5', phone: '123456799', address: '贵州贵456阳'},
    { name:'李四6', phone: '123456799', address: '贵州546贵阳'},
  ]
})
</script>